<transition :name="transitionName">
    <cs-page class="cs-admin" :class="{ 'top-layer':topLayer }">
        <cs-header title="JSComponents">
            <router-link to="/Main" slot="left">
                <cs-button icon="fa fa-chevron-left">Back</cs-button>
            </router-link>
        </cs-header>
        <cs-contenter>
            <div class="section-container trl">
                <h1><i class="fa fa-cube"></i>JSComponents</h1>
            </div>
            <div class="cs-cell-group">
                <cs-cell title="Toast" to="/Main/JSComponents/Toast" is-link></cs-cell>
                <cs-cell title="Popup" to="/Main/JSComponents/Popup" is-link></cs-cell>
                <cs-cell title="Indicator" to="/Main/JSComponents/Indicator" is-link></cs-cell>
                <cs-cell title="MessageBox" to="/Main/JSComponents/MessageBox" is-link></cs-cell>
                <cs-cell title="ActionSheet" to="/Main/JSComponents/ActionSheet" is-link></cs-cell>
                <cs-cell title="Picker" to="/Main/JSComponents/Picker" is-link></cs-cell>
                <cs-cell title="DateTimePicker" to="/Main/JSComponents/DateTimePicker" is-link></cs-cell>
            </div>
        </cs-contenter>
    </cs-page>
</transition>